<template>
  <div>
    <AddButton title="编辑" class="mg-bottom-16" @click="showSaveOrUpdate=true">
      <img slot="icon" src="@/assets/img/edit.jpg" style="width: 14px;height: 14px;" />
    </AddButton>
    <div class="device-brief">
      <div v-for="({name,content},id) in deviceList" :key="id" class="item">
        <div class="name">
          {{ name }}
        </div>
        <div v-if="name==='所属分组'" class="content pd-left-20 justify-between">
          {{ content }}
          <el-button type="text" style="color: #0084EE;" @click="handleNavTo">前往设置</el-button>
        </div>
        <div v-else class="content pd-left-20">
          {{ content }}
        </div>
      </div>
    </div>
    <SaveOrUpdate
      :visible.sync="showSaveOrUpdate"
      title="编辑基本信息"
      :value="formData"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { constUtils } from '../../mixin'
import AddButton from '@/components/add-button/index'
import SaveOrUpdate from './save-or-update-device'
import dayjs from 'dayjs'

export default {
  name: 'ProductBrief',
  components: {
    AddButton,
    SaveOrUpdate,
  },
  mixins: [constUtils],
  props: {
    value: { type: Object, required: true },
  },
  data() {
    return {
      showSaveOrUpdate: false,
      formData: {},
      deviceList: [],
      productKey: 0,
    }
  },
  computed: {},
  watch: {
    value() {
      this.formData = this.value
      this.initData()
    },
  },
  methods: {
    initData() {
      this.initDeviceList()
    },
    handleChange() {
      this.$emit('change')
    },
    handleNavTo() {
      this.$router.push({ path: '/device/device-group' })
    },
    initDeviceList() {
      const device = {
        name: '',
        remarkName: '',
        source: '',
        enableStateEnumName: '',
        regionVO: { name: '' },
        ...this.formData,
      }

      const product = { name: '', netTypeName: '', ...this.formData.productVo }

      this.deviceList = [
        {
          name: '设备名',
          content: device.name,
        },
        {
          name: '所属产品',
          content: product.name,
        },
        {
          name: '创建时间',
          content: dayjs(device.createTime).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
          name: '备注名称',
          content: device.remarkName,
        },
        {
          name: '入网类型',
          content: product.netTypeName,
        },
        {
          name: '所属分组',
          content: '--',
        },
        {
          name: '数据来源',
          // TODO 2021年5月28日11:20:09 字段数据为空
          content: device.source,
        },
        {
          name: '启用状态',
          content: device.enableStateEnumName,
        },
        {
          name: '在线状态',
          content: device.online ? '在线' : '离线',
        },
        {
          name: '最近上线时间',
          content: dayjs(device.updateTime || device.createTime).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
          name: '绑定区域',
          content: device.regionVO && device.regionVO.name,
        },
        {
          name: 'UE4',
          content: device.ue4Code,
        },
        {
          name: '备注说明',
          content: device.remark,
        },
      ]
    },
  },
}
</script>

<style scoped lang="scss">
.device-brief {
  display: flex;
  border-right: none;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  flex-wrap: wrap;

  .item {
    display: flex;
    width: 33.33%;
    line-height: vw(24px);

    &:last-child {
      flex: 1;
    }

    .name,
    .content {
      padding: vw(12px) vw(20px);
      font-size: vw(14px);
    }

    .name {
      width: vw(200px);
      font-weight: bold;
      background-color: #f2f2f2;
      border-top: 1px solid #999;
      border-left: 1px solid #999;
    }

    .content {
      color: #999;
      border-top: 1px solid #999;
      border-left: 1px solid #999;
      flex: 1;
    }
  }
}
</style>
